<template>
	<view class="content">
		<swiper :autoplay="true" class="banner-swiper">
			<swiper-item v-for="item in buildInfo.imgs">
				<image :src="item" class="banner_image"></image>
			</swiper-item>
		</swiper>
		<view class="information">
			<view class="header-left">
				<view class="line"></view>基本信息 
			</view>
			<image class="information-share" src="../../../static/image/icon/share.png"></image>
		</view>
		<view class="information-text-list">
			<text class="text-list1">地 区</text>
			<text class="text-list">{{buildInfo.area.name}}</text>
		</view>
		<view class="information-text-list">
			<text class="text-list">楼盘名称</text>
			<text class="text-list">{{buildInfo.name}}</text>
		</view>
		<view class="information-text-list">
			<text class="text-list1">户 型</text>
			<text class="text-list">{{buildInfo.model.name}}</text>
		</view>
		<view class="information">
			<view class="header-left">
				<view class="line"></view>地理位置 
			</view>
		</view>
		<view class="map-size">
			<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="case-background">
			<view class="information">
				<view class="header-left">
					<view class="line"></view>案例展示
				</view>
			</view>
			<view class="case">
				<view class="case-left">
					<image class="case-image" src="../../../static/image/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
				<view class="case-left">
					<image class="case-image" src="../../../static/image/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
			</view>
			<view class="case">
				<view class="case-left">
					<image class="case-image" src="../../../static/image/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
				<view class="case-left">
					<image class="case-image" src="../../../static/image/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
			</view>
			<button class="button">
				<view class="text-button">确定预约</view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buildInfo: {},
				title: 'map',
				latitude: "28.177767",
				longitude: "112.934522",
				covers: [{
					latitude: "28.177767",
					longitude: "112.934522",
					iconPath: '../../../static/markers.png'
				}]
			}
		},
		methods: {
			pageDate(id) {
				console.log(id);
				this.$http.post('system/getBuildDetail', {
					id
				}).then(res => {
					console.log(res);
					this.buildInfo = res.data.data.buildInfo
					this.latitude=res.data.data.buildInfo.latitude
					this.longitude=res.data.data.buildInfo.longitude
					console.log(this.latitude,this.longitude);
					this.covers[0].latitude=res.data.data.buildInfo.latitude
					this.covers[0].longitude=res.data.data.buildInfo.longitude
			})
		}	
	},
	onLoad(opt) {
		this.pageDate(opt.id)
	},
		
}
</script>

<style lang="scss" scoped>
	.header-left {
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
		display: flex;
		align-items: center;

		.line {
			width: 6rpx;
			height: 28rpx;
			background: #3d9c36;
			margin-right: 20rpx;
		}
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box; //盒子模型

		.banner-swiper {
			width: 100%;
			height: 450rpx;

			.banner_image {
				width: 750rpx;
				height: 450rpx;
				background: #d9d9d9;
			}
		}

		.image {
			width: 750rpx;
			height: 450rpx;
		}

		.information {
			margin-top: 40rpx;
			margin-left: 20rpx;
			margin-right: 40rpx;
			box-sizing: border-box;
			justify-content: space-between;
			display: flex;

			.information-share {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.information-text-list {
			margin-top: 20rpx;
			margin-left: 40rpx;

			.text-list {
				margin-right: 40rpx;
			}

			.text-list1 {
				margin-right: 40rpx;
				letter-spacing: 18rpx;
			}
		}

		.map-size {
			margin-top: 20rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
			width: 670rpx;
			height: 406rpx;
		}

		.case-background {
			background-color: #F5F5F5;
			position: absolute;

			.case {
				margin-top: 20rpx;
				margin-left: 40rpx;
				margin-right: 22rpx;
				box-sizing: border-box;
				overflow-x: scroll;
				display: flex;

				.case-left {
					margin-right: 20rpx;

					.case-image {
						width: 324rpx;
						height: 200rpx;
					}

					.case-details {
						width: 324rpx;
						height: 50rpx;
						background: #ffffff;
						border-radius: 0rpx 0rpx 12rpx 12rpx;
						box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.10);
						position: relative;
						bottom: 5rpx;

						.case-details-text {
							text-align: center;
						}

						.case-details-text::after {
							content: "—";
							font-size: 24rpx;
							font-weight: 500;
							color: #3d9c36;
						}

						.case-details-text::before {
							content: "—";
							font-size: 24rpx;
							font-weight: 500;
							color: #3d9c36;
						}
					}
				}
			}
		}

		.button {
			margin-top: 100rpx;
			margin-bottom: 100rpx;
			width: 328rpx;
			height: 80rpx;
			background: #3d9c36;
			border-radius: 8rpx;

			.text-button {
				color: #ffffff;
			}
		}
	}
</style>
